/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         https://github.com/t3framework/ 
 *------------------------------------------------------------------------------
 */


//
// MOBILE
// -------------------------------------------------------------
@media (max-width: 767px) {


  // ------------------------------------------------------
  // NAVIGATIONS ELEMENTS
  // ------------------------------------------------------

  // BREADCRUMBS
  // -------------------------------------------------------
  .t3-navhelper {
    margin-left: -20px;
    margin-right: -20px;
  }



  // -------------------------------------------------------
  //  JA MAIN MENU
  // -------------------------------------------------------

  .t3-mainnav {
    background: @navbarBackground;
    border-top: 1px solid darken(@navbarBackground, 5%);
    height: auto;
    margin-left: -20px;
    margin-right: -20px;
  }

  // Toggle Button
  .t3-mainnav .navbar .btn-navbar {
    margin-bottom: (@baseLineHeight / 2);
  }


  // COLLAPSIBLE NAVBAR
  // ----------------------------------------------------

  // The nav
  .t3-mainnav .nav-collapse {
    margin-top: (@baseLineHeight / 2);
    background: #fff;
    //#gradient > .vertical(@navbarBackground, @navbarBackgroundHighlight);
  }

  .t3-mainnav .nav-collapse .nav {
    margin: 0;
  }

  .t3-mainnav .nav-collapse .nav > li {
  }

  .t3-mainnav .nav-collapse .nav > li > a {
    margin-bottom: 0;
  }


  // Nav and dropdown links in navbar
  // -------------------------------
  .t3-mainnav .nav-collapse .nav > li > a,
  .t3-mainnav .nav-collapse .dropdown-menu a {
    border-bottom: 1px solid @hrBorder;
    padding: (@baseLineHeight / 2) @baseLineHeight;
    font-weight: bold;
    //color: @navbarLinkColor;
    text-shadow: none;
    .border-radius(0);
  }

  .t3-mainnav .nav-collapse .dropdown-menu li + li a {
    margin-bottom: 0;
  }

  // Hover state
  .t3-mainnav .nav-collapse .nav > li > a:hover {
    background-color: @dropdownLinkBackgroundHover;
    background-image: none;
    filter: none;
  }


  // dropdown links
  // --------------
  .t3-mainnav .nav-collapse .dropdown-menu a {
    border-top: 1px solid darken(@navbarBackground, 5%);
    border-bottom: 0;
    font-weight: normal;
    padding: (@baseLineHeight / 2) @baseLineHeight;
  }


  // Hover state
  .t3-mainnav .nav-collapse .dropdown-menu a:hover {
    background-color: @dropdownLinkBackgroundHover;
    background-image: none;
    filter: none;
  }


  // Dropdowns in the navbar
  // -----------------------
  .t3-mainnav .nav-collapse .dropdown-menu {
    margin: 0;
    padding: 0;
    background-color: @navbarBackground;
    border: none;
    .border-radius(0);
    .box-shadow(none);
  }



  // -------------------------------------------------------
  //  JA MAIN MENU (Inverted)
  // -------------------------------------------------------

  .T3Navbar() when (@T3NavbarInverted = 1) {

    // Begin: Mixin Styling
    background: @grayDark;
    border-top: 1px solid @grayDark;

    // Toggle Button
    .navbar .btn-navbar {
    }


    // COLLAPSIBLE NAVBAR
    // ----------------------------------------------------

    // The nav
    .nav-collapse {
      background: @grayDarker;
      color: @grayLighter;
    }


    // Nav and dropdown links in navbar
    // -------------------------------
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
      border-bottom: 1px solid @gray;
    }

    // Hover state
    .nav-collapse .nav > li > a:hover,
    .nav-collapse .dropdown-menu a:hover {
      background-color: @dropdownLinkBackgroundHover;
    }


    // dropdown links
    // --------------
    .nav-collapse .dropdown-menu a {
      border-top: 1px solid @gray;
      border-bottom: 0;
    }


    // Hover state
    .nav-collapse .dropdown-menu a:hover {
      background-color: @dropdownLinkBackgroundHover;
    }


    // Dropdowns in the navbar
    // -----------------------
    .nav-collapse .dropdown-menu {
      background-color: @grayDark;
    }

  // End: Mixin Styling
  }

  .T3Navbar() when (@T3NavbarInverted = 0) {
    // Leave blank here because we will use the default style.
  }

  // Calling the styles
  .t3-mainnav {
    .T3Navbar();
  }


  
  //  MISC
  // ----------------------------------------------------
  .t3-mainnav .navbar .nav > li > .dropdown-menu {
    &:before, &:after, .divider {
      display: none;
    }
  }

  .t3-mainnav .customization {
    display: none;
  }

  // End Responsive
}